<template>
  <div class="orderDetail">
    <myHead title="订单详情" background-color="#262A36"></myHead>
    <div class="complete" v-if="status == 2">
      <div>订单已完成</div>
      <div>配送费2.5元已到账</div>
    </div>
    <div class="gray" v-if="status == 2"></div>
    <div class="top">
      <div>
        <div>距离商家</div>
        <div>1.0km</div>
      </div>
      <div class="top_center">
        <div>距离买家</div>
        <div>1.0km</div>
      </div>
      <div>
        <div>配送费</div>
        <div class="red">2.5元</div>
      </div>
    </div>
    <div class="map"></div>
    <div class="card">
      <div class="title">门店地址</div>
      <div class="cardContent">
        <div class="inform">
          <div class="logo">
            <img src="../../../static/img/lifetouxiang.png" alt="">
          </div>
          <div class="name">
            <div>庆丰包子铺（顺义建新店）</div>
            <div>
              <div>西安市雁塔区曲江池东234号</div>
              <div>
                <van-icon name="location" color="#FED206" />
                <span>距离你500m</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btn">
          <div>联系商家</div>
          <div>导航前往</div>
        </div>
        <div class="workTime"> —— 外卖配送时间：9:00-21:00 ——</div>
      </div>
    </div>
    <div class="address">
      <div class="title">配送信息</div>
      <div class="addContent">
        <div class="take">
          <div class="left">
            <div class="icon">
              <img src="../../../static/img/send/qu.png" alt="">
            </div>
            <div>1.0km</div>
          </div>
          <div class="right">
            <div class="name">庆丰包子铺（顺义建新店）</div>
            <div class="address">西安市雁塔区曲江池东路金地广场68号旺座 国际b座4楼201室</div>
          </div>
        </div>
        <div class="send">
          <div class="left">
            <div class="icon">
              <img src="../../../static/img/send/song.png" alt="">
            </div>
            <div>1.0km</div>
          </div>
          <div class="right">
            <div class="name">庆丰包子铺（顺义建新店）</div>
            <div class="address">西安市雁塔区曲江池东路金地广场68号旺座 国际b座4楼201室</div>
          </div>

        </div>
      </div>
    </div>
    <div class="shopList">
      <div class="title">商品清单</div>
      <div class="shop">
        <div class="shopName">川湘辣子鸡（小份+米饭）</div>
        <div class="shopNum">×2</div>
        <div class="shopPrice">￥9.9</div>
      </div>
    </div>
    <div class="remark">
      <div class="title">备注</div>
      <div class="remarkContent">
        <div>备注：</div>
        <div>尽快送达，不要迟到哦！尽快送达，不要迟到哦 尽快送达，不要迟到哦!</div>
      </div>
    </div>
    <div class="orderDesc">
      <div class="title">订单信息</div>
      <div class="orderContent">
        <div class="orderContentList">
          <div>下单时间：</div>
          <div>2020-05-01 12:38:26</div>
        </div>
        <div class="orderContentList">
          <div>订单编号：</div>
          <div>2020265892598746</div>
        </div>
        <div class="orderContentList">
          <div>订单总额：</div>
          <div>￥59.9</div>
        </div>
      </div>
    </div>
    <div class="save">立即抢单</div>
  </div>
</template>

<script>
  import myHead from "../../components/SendComponents/lib/myHead";
  import Vue from 'vue';
  import { Divider,Icon } from 'vant';

  Vue.use(Divider);
  Vue.use(Icon);

  export default {
    name: "sendIndex",
    components:{
      myHead
    },
    data() {
      return {
        status:0,
        id:0,
      }
    },
    methods: {
      back() {
        this.$router.back();
      },
    },
    mounted() {
     this.id =  this.$route.query.id;
    },
    watch: {

    }
  }
</script>

<style scoped>
  .orderDetail{
    padding-top: .5rem;
  }
  .orderDetail .complete{
    background-color: #FED206;
    padding: .3rem .25rem;
    color: #333333;
    font-size: .12rem;
  }
  .orderDetail .gray{
    background-color: #F4F4F4;
    height: .15rem;
  }
  .orderDetail .complete div:nth-child(1){
    font-size: .14rem;
    font-weight: bold;
    margin-bottom: .05rem;
  }
  .orderDetail .top{
    display: flex;
    justify-content: center;
    padding: .1rem 0;
    text-align: center;
    font-size: .13rem;
    color: #BABABA;
  }
  .orderDetail .top .top_center{
    padding: 0 .2rem;
    margin:  0 .2rem;
    border-left: 1px solid #F5F5F5;
    border-right: 1px solid #F5F5F5;
  }
  .orderDetail .top>div>div:nth-child(2){
    font-size: .18rem;
    margin-top: .05rem;
    color: #333333;
    font-weight: bold;
  }
  .orderDetail .top>div>div.red{
    color: #F42016;
  }
  .orderDetail .title{
    font-size: .16rem;
    color: #333333;
    font-weight: bold;
    padding: 0 .16rem;
    margin-bottom: .15rem;
  }
  .orderDetail .cardContent .inform{
    display: flex;
    margin: 0 .15rem;
  }
  .orderDetail .cardContent .inform .logo{
    width: .46rem;
    height: .46rem;
    margin-right: .12rem;
    border-radius: .23rem;
    overflow: hidden;
  }
  .orderDetail .cardContent .inform .name{
    flex-grow: 1;
  }
  .orderDetail .cardContent .inform .name>div:nth-child(1){
    color: #333333;
    font-size: .14rem;
    font-weight: bold;
  }
  .orderDetail .cardContent .inform .name>div:nth-child(2){
    display: flex;
    justify-content: space-between;
  }
  .orderDetail .cardContent .btn{
    display: flex;
    justify-content: center;
    margin: .06rem 0;
  }
  .orderDetail .cardContent .btn div{
    width: 1.4rem;
    height: .38rem;
    background-color: #333333;
    color: #FFFFFF;
    font-size: .14rem;
    line-height: .38rem;
    text-align: center;
  }
  .orderDetail .cardContent .btn div:nth-child(1){
    border-radius: .19rem 0 0 .19rem;
    background-color: #FFD200;
    color: #333333;
  }
  .orderDetail .cardContent .btn div:nth-child(2){
    border-radius: 0 .19rem .19rem 0;
  }
  .orderDetail .cardContent .workTime{
    text-align: center;
    color: #333333;
    margin-bottom: .05rem;
  }
  .orderDetail .addContent{
    border-bottom: 1px solid #F5F5F5;
    margin: 0 .15rem .12rem;
  }
  .orderDetail .addContent>div{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: .12rem;
    padding: .1rem 0;
  }
  .orderDetail .addContent>div img{
    width: 100%;
  }
  .orderDetail .addContent>div .icon{
    width: .21rem;
    height: .25rem;
    overflow: hidden;
    margin-bottom: .05rem;
  }
  .orderDetail .addContent>div .right{
    margin: 0 .1rem;
  }
  .orderDetail .shop{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: .13rem;
    padding: 0 .15rem .1rem;
  }
  .orderDetail .remark{
    border-bottom: 1px solid #F5F5F5;
    margin-bottom: .12rem;
  }
  .orderDetail .remarkContent{
    display: flex;
    justify-content: space-between;
    margin: 0 .15rem .1rem;
    background-color: #F4F4F4;
    padding: .1rem;
    font-size: .12rem;
    color: #666666;
  }
  .orderDetail .remarkContent div:nth-child(1){
    width: .48rem;
    flex-grow: 1;
    color: #FB4448;
  }
  .orderDetail .orderContent{
    padding: 0 .16rem;
  }
  .orderDetail .orderContentList{
    display: flex;
    padding-bottom: .14rem;
    font-size: .13rem;
    color: #333333;
  }
  .orderDetail .orderContentList:nth-child(3){
    justify-content: space-between;
  }
  .orderDetail .orderContentList:nth-child(3) div:nth-child(2){
    font-size: .17rem;
    color: #FB4448;
    font-weight: bold;
  }
  .orderDetail .save{
    width: 3.4rem;
    height: .48rem;
    background-color: #FED206;
    border-radius: .24rem;
    line-height: 0.48rem;
    text-align: center;
    margin: .05rem auto .22rem;
    font-size: .14rem;
    color: #333333;
    font-weight: bold;
  }
</style>
